import React, { Component } from 'react';
import { NavBar, Form, Input, Button, } from 'antd-mobile'
import "../styles/Register2.scss"
import * as service from "../api/index"


class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            yanzheng: ''
        };
    }
    //点击发送验证码
    async yanzhengma() {
        var res = await service.user_dosendmsgcode(this.props.history.location.state)
        // console.log(res.data.data);
        alert(res.data.data)
        // console.log(this.props.history.location.state);
        // this.setState({ yanzheng: res.data.data })
    }
    //点击下一步事件
    async dianji() {
        console.log(this.state.yanzheng);
        var res = await service.user_docheckcode({ tel: this.props.history.location.state.tel, telcode: this.state.yanzheng })
        // console.log(res.data);


        if (res.data.code == '200') {
            this.props.history.push({ pathname: '/register3', state: this.props.history.location.state });//跳路由传参
            // console.log(this.props.history.location.state)
            alert(res.data.message)
        } else {
            this.props.history.push('/register2')
        }
    }


    render() {
        return (
            <div className='zhuce2'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>注册</p></NavBar>
                </div>
                <h4>我们将以短信验证的形式发送给你</h4>
                <div className="box1">

                    <Form
                        requiredMarkStyle='none'
                        onFinish={() => { this.dianji() }}
                        footer={
                            <Button block type='submit' color='primary' size='large'>
                                下一步
                            </Button>
                        }>
                        <Form.Item
                            extra={
                                <div className='extraPart' onClick={() => { this.yanzhengma() }}>
                                    <a>发送验证码</a>
                                </div>
                            }
                        >
                            <Input placeholder='请输入验证码' clearable
                                value={this.state.yanzheng}
                                onChange={value => {
                                    // console.log(value);
                                    this.setState({ yanzheng: value })
                                }} />

                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Register;